import React from 'react'
import {Col, Row} from "antd";

import {WeaLocaleProvider,WeaInputNumber,WeaColorPicker} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;
import {WeaMaterialLib} from 'weaPortalPublic';

export default class SettingStyleExtend extends React.Component{

    render (){
        const {setting,setSetting} = this.props
        const {row,col,imgWidth,imgHeight,titleFontSize,titleColor,rowMargin,settingIcon} = setting
        return (
            <div className="customFeatures-SettingStyleExtend">
                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@bjup61`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@vnlck6`} span={6} >
                            <div className="item-title">{getLabel(19407, '布局')} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@oz5f8e`} span={18}>
                            <div className="item-label">{getLabel(522858, '行')} :</div>
                            <div className="row-value"><WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@l5qyt8`}  value={row} viewAttr={2} onChange={value => setSetting({row: value})}/></div>
                            <div className="item-label">{getLabel(522859, '列')} :</div>
                            <div className="col-value"><WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@r1on2z`}  value={col} viewAttr={2} onChange={value => setSetting({col: value})}/></div>
                        </Col>
                    </Row>
                </div>
                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@92acbs`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@966is8`} span={6} >
                            <div className="item-title">{getLabel(22969, '图标')} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@bucoqz`} span={18}>
                            <div className="item-label">{getLabel(203, '宽度')} :</div>
                            <div className="img-width-value"><WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@bb88lx`}  value={imgWidth} viewAttr={2} onChange={value => setSetting({imgWidth: value})}/></div> px
                            <div className="item-label">{getLabel(207, '高度')} :</div>
                            <div className="img-height-value"><WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@3ehns0`}  value={imgHeight} viewAttr={2} onChange={value => setSetting({imgHeight: value})}/></div> px
                        </Col>
                    </Row>
                </div>

                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@w73fbs`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@pabegg`} span={6} >
                            <div className="item-title">{getLabel(195, '名称')} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@0njh3g`} span={18}>
                            <div className="item-label">{getLabel(84212, '字体大小')} :</div>
                            <div className="title-fontSize-value"><WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@5wtdwq`}  value={titleFontSize} viewAttr={2} onChange={value => setSetting({titleFontSize: value})}/></div> px
                            <div className="item-label">{getLabel(2076, '字体颜色')} :</div>
                            <div className="title-color-value">
                                <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@2s08zv`}
                                    value={titleColor}
                                    onChange={(v)=> setSetting({titleColor: v})}
                                />
                            </div>
                        </Col>
                    </Row>
                </div>
                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@9vrhas`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@wsu514`} span={6} >
                            <div className="item-title">{getLabel(522856, '行间距')} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@iymhsk`} span={18}>
                            <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@3kaxgo`}  value={rowMargin} viewAttr={2} onChange={value => setSetting({rowMargin: value})}/>

                        </Col>
                    </Row>
                </div>
                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@pba1ex`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ozqekj`} span={6} >
                            <div className="item-title">{getLabel(522857, '设置图标')} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@t5wcj2`} span={18}>
                            <WeaMaterialLib ecId={`${this && this.props && this.props.ecId || ''}_WeaMaterialLib@xuhza1`}
                                multiCheck={false}
                                value={settingIcon}
                                isShow={true}
                                onChange={value => setSetting({settingIcon: value})}
                            />
                        </Col>
                    </Row>
                </div>
            </div>
        )

    }
}